<template>
  <el-main>
    <!-- 上方卡片区域 -->
    <el-card class="search-card" shadow="hover">
      <el-form :model="searchForm" inline>
        <!-- 选择数据库号 -->
        <el-form-item label="数据库号">
          <el-select v-model="searchForm.database" placeholder="选择数据库号">
            <el-option v-for="db in databases" :key="db" :label="`数据库 ${db}`" :value="db" />
          </el-select>
        </el-form-item>

        <!-- 选择数据类型 -->
        <el-form-item label="数据类型">
          <el-select v-model="searchForm.dataType" placeholder="选择数据类型">
            <el-option label="String" value="String" />
            <el-option label="List" value="List" />
            <el-option label="Hash" value="Hash" />
            <el-option label="Set" value="Set" />
            <el-option label="ZSet" value="ZSet" />
          </el-select>
        </el-form-item>

        <!-- 查询关键字 -->
        <el-form-item label="查询关键字">
          <el-input v-model="searchForm.keyword" placeholder="请输入关键字" />
        </el-form-item>

        <!-- 查询模式 -->
        <el-form-item label="查询模式">
          <el-radio-group v-model="searchForm.searchMode">
            <el-radio label="exact">精确搜索</el-radio>
            <el-radio label="fuzzy">模糊搜索</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 搜索按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 下方数据展示区域 -->
    <el-card class="result-card" shadow="hover">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="key" label="键" width="200" />
        <el-table-column prop="value" label="值" />
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
          background
          layout="prev, pager, next"
          :total="totalItems"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          @current-change="handlePageChange"
      />
    </el-card>
  </el-main>
</template>

<script>
import { ref, onMounted } from 'vue';
import {getCacheValuesByType} from "@/service/admin/admin.service";


export default {
  name: 'RedisAdmin',
  setup() {
    const searchForm = ref({
      database: null,
      dataType: 'String',
      keyword: '',
      searchMode: 'exact',
    });

    const databases = ref(Array.from({ length: 16 }, (_, i) => i));
    const tableData = ref([]);
    const totalItems = ref(0);
    const pageSize = ref(10);
    const currentPage = ref(1);

    const handleSearch = () => {
      currentPage.value = 1;
      fetchData();
    };

    const handlePageChange = (page) => {
      currentPage.value = page;
      fetchData();
    };

    const fetchData = () => {
      const params = {
        database: searchForm.value.database,
        type: searchForm.value.dataType,
      };

      // 调用 API 请求
      getCacheValuesByType(
          params,
          (response) => {
            // 成功回调：更新表格数据和总项数
            tableData.value = response.data;
            totalItems.value = response.data.length; // 假设返回的数据是数组
          },
          (error) => {
            // 失败回调：处理错误
            console.error('获取缓存值失败:', error);
          }
      );
    };

    onMounted(() => {
      fetchData();
    });

    return {
      searchForm,
      databases,
      tableData,
      totalItems,
      pageSize,
      currentPage,
      handleSearch,
      handlePageChange,
    };
  },
};
</script>

<style scoped>
.search-card {
  margin-bottom: 20px;
  padding: 15px;
}

.result-card {
  margin-top: 20px;
  padding: 15px;
}

.el-form-item {
  margin-bottom: 10px;
}
</style>
